<template>
  <div class="main" v-loading="pageLoading" element-loading-text="加载中">
    <div class="nav">
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/data-converge/indicator-manage' }"
            ><span class="breadcrumb-title">列表</span></el-breadcrumb-item
          >
          <el-breadcrumb-item>新增体系</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="content">
      <div class="content-main">
        <!-- <span class="base-info-title">基本信息：</span> -->
        <div class="content-title">
          <svg-icon icon-class="标题图标" />
          <span>基本信息</span>
        </div>
        <el-form
          ref="taskFormRef"
          :model="taskForm"
          :rules="taskFormRules"
          label-width="110px"
        >
          <div class="base-info">
            <el-row :gutter="60">
              <el-col :span="8">
                <el-form-item label="指标体系名称" prop="name">
                  <el-input v-model="taskForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="体检城市" prop="medicalCity">
                  <!--                  <el-select-->
                  <!--                    v-model="taskForm.medicalCity"-->
                  <!--                    placeholder="请选择"-->
                  <!--                    :loading="cityOptionsLoading"-->
                  <!--                  >-->
                  <!--                    <el-option-->
                  <!--                      v-for="item in cityOptions"-->
                  <!--                      :key="item.value"-->
                  <!--                      :label="item.label"-->
                  <!--                      :value="item.value"-->
                  <!--                    >-->
                  <!--                    </el-option>-->
                  <!--                  </el-select>-->
                  <el-cascader
                    v-model="areaInfo"
                    :options="cityOptions"
                    :props="casxaderProps"
                    placeholder="体检城市"
                    class="area-cascader"
                    :show-all-levels="false"
                    @change="handleChangeArea"
                  ></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="体检年份" prop="medicalYear">
                  <el-select
                    v-model="taskForm.medicalYear"
                    placeholder="请选择"
                    filterable
                  >
                    <el-option
                      v-for="item in yearOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="60">
              <el-col :span="24">
                <el-form-item label="指标体系说明" prop="indicatorDesciption">
                  <el-input
                    v-model="taskForm.indicatorDesciption"
                    type="textarea"
                    :rows="3"
                    resize="none"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- <el-divider></el-divider> -->
          <!-- <span class="indicator-tree-title">指标体系：</span> -->
          <div class="content-title">
            <svg-icon icon-class="标题图标" />
            <span>指标体系</span>
          </div>
          <div class="operation">
            <div class="operation-left">
              <!-- <icon-button icon="加" title="新增维度" @click.native="addDimension"></icon-button> -->
              <!-- type="primary" -->
              <!-- <icon-button icon="下载" title="一键导入" type="plain"></icon-button>
              <el-button type="text">模板下载</el-button> -->
            </div>
            <div class="operation-right" v-if="indicatorSystemName">
              <!-- <span>
                <i>*{{ indicatorSystemName }}</i>体检指标体系，包含<i>{{ dimensionTree.length }}个维度</i>，共计
                <i>{{ indicatorLength }}个指标 </i>
              </span> -->
            </div>
          </div>
          <el-divider></el-divider>
          <div class="indicator-list">
            <div class="indicator-list-left">
              <div class="indicator-list-right-title">
                指标维度
                <icon-button
                  icon="加"
                  title="新增维度"
                  @click.native="addDimension"
                  style="float: right; margin-right: 10px"
                ></icon-button>
              </div>
              <!-- <div class="indicator-list-left-top">
                <icon-button
                  icon="加"
                  title="新增维度"
                  @click.native="addDimension"
                  type="primary1"
                ></icon-button>
                <icon-button icon="下载" title="一键导入" type="plain1"></icon-button>
                <el-button type="text">模板下载</el-button>
              </div>
              <div class="indicator-list-left-divider"></div> -->
              <div class="indicator-list-left-bottom">
                <el-tree
                  :data="dimensionTree"
                  node-key="id"
                  ref="tree"
                  class="dimension-tree"
                  :highlight-current="true"
                  :default-expand-all="true"
                  :expand-on-click-node="false"
                  empty-text="请先添加维度"
                  @node-click="handleNodeClick"
                >
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <div class="custom-tree-node-title">
                      <img
                        v-if="data.hasOwnProperty('icon')"
                        :src="data.icon"
                      />
                      <span v-else style="width: 7px"></span>
                      <span>{{ node.label }}</span>
                    </div>
                    <span>
                      <template v-if="data.hasOwnProperty('children')">
                        <el-tooltip
                          v-if="data.hasOwnProperty('icon')"
                          effect="dark"
                          content="添加视角"
                          placement="top"
                        >
                          <svg-icon
                            icon-class="添加子目录"
                            @click.stop="addViewData(data)"
                          ></svg-icon>
                        </el-tooltip>
                        <el-tooltip
                          v-else
                          effect="dark"
                          content="添加指标"
                          placement="top"
                        >
                          <svg-icon
                            icon-class="添加子目录"
                            @click.stop="addIndicator(data)"
                          ></svg-icon>
                        </el-tooltip>
                        <el-tooltip
                          v-if="data.hasOwnProperty('icon')"
                          effect="dark"
                          content="编辑维度"
                          placement="top"
                        >
                          <svg-icon
                            icon-class="编辑"
                            @click.stop="editDimension(data)"
                          ></svg-icon>
                        </el-tooltip>
                        <el-tooltip
                          v-else
                          effect="dark"
                          content="编辑视角"
                          placement="top"
                        >
                          <svg-icon
                            icon-class="编辑"
                            @click.stop="addViewDialogVisible = true"
                          ></svg-icon>
                        </el-tooltip>
                      </template>
                      <el-tooltip effect="dark" content="删除" placement="top">
                        <svg-icon
                          icon-class="删除"
                          @click.stop="delNode(node, data)"
                        ></svg-icon>
                      </el-tooltip>
                    </span>
                  </span>
                </el-tree>
              </div>
            </div>
            <div class="indicator-list-divider"></div>
            <div class="indicator-list-right">
              <template
                v-if="
                  indicatorForm.hasOwnProperty('id') &&
                  !indicatorForm.hasOwnProperty('children')
                "
              >
                <el-row :gutter="24">
                  <div class="indicator-list-right-title">指标信息</div>
                  <el-form :model="indicatorForm" label-width="100px">
                    <el-col :span="8">
                      <el-form-item label="指标释义">
                        <el-input
                          v-model="indicatorForm.indicatorParaphrase"
                          class="index-definition"
                          :title="indicatorForm.indicatorParaphrase"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="指标单位">
                        <el-input
                          v-model="indicatorForm.indicatorUnit"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="评价类型">
                        <el-select
                          v-model="indicatorForm.evaluationType"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="item in evaluationTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-form>
                </el-row>
                <el-row :gutter="24">
                  <div class="indicator-list-right-title">数据项及指标运算</div>
                  <el-col :span="8">
                    <div>
                      <span class="top-btn">
                        <svg-icon icon-class="加"></svg-icon>新增数据项
                      </span>
                    </div>
                    <div class="bottom-list">
                      <el-tree
                        :data="dataTree"
                        node-key="id"
                        ref="tree"
                        class="dimension-tree"
                        :highlight-current="true"
                        :default-expand-all="true"
                        :expand-on-click-node="false"
                        empty-text="请先添加数据项"
                      >
                        <span class="custom-tree-node" slot-scope="{ node }">
                          <div class="custom-tree-node-title">
                            <span>{{ node.label }}</span>
                          </div>
                          <span>
                            <!-- <template> -->
                            <el-tooltip
                              effect="dark"
                              content="编辑数据项"
                              placement="top"
                            >
                              <svg-icon icon-class="编辑"></svg-icon>
                            </el-tooltip>
                            <el-tooltip
                              effect="dark"
                              content="删除"
                              placement="top"
                            >
                              <svg-icon icon-class="删除"></svg-icon>
                            </el-tooltip>
                            <!-- </template> -->
                          </span>
                        </span>
                      </el-tree>
                      <!-- <div class="bottom-list-line">建成区面积</div> -->
                    </div>
                  </el-col>
                  <el-col :span="16">
                    <div class="top-operation">
                      <span>+</span>
                      <span>-</span>
                      <span>*</span>
                      <span>/</span>
                      <span>(</span>
                      <span>)</span>
                    </div>
                    <div class="bottom-operation"></div>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <div class="indicator-list-right-title">
                    评价标准
                    <span class="top-btn" style="float: right">
                      <svg-icon icon-class="加"></svg-icon>新增评价标准
                    </span>
                  </div>
                  <el-col :span="24">
                    <el-table
                      :data="evaluationTable"
                      header-row-class-name="cus-header-row"
                      ref="tableRef"
                      stripe
                      width="100%"
                    >
                      <el-table-column prop="1" label="评价结论">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row['1']"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="2" label="数值高于(包含)">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row['2']"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="3" label="数值低于(不包含)">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row['3']"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="" label="操作">
                        <template slot-scope="scope">
                          <i
                            class="el-icon-delete-solid"
                            @click="deleteEvaluation(scope.row)"
                          ></i>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
              </template>
            </div>

            <el-card class="indicator-list-right" v-if="false"> </el-card>
          </div>
          <el-divider></el-divider>
          <el-form-item class="flex-center">
            <el-button type="primary" @click="saveIndicatorSystem"
              >保存</el-button
            >
            <!-- <el-button type="primary" @click="confirmAddIndicatorSystem">保存并发布</el-button> -->
            <el-button type="plain" @click="publish">发布</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 新增维度对话框 -->
    <el-dialog
      title="新增维度"
      :visible.sync="addDimensionDialogVisible"
      width="40%"
      @closed="handleAddDimensionDialogClosed"
    >
      <el-form
        ref="addDimensionFormRef"
        :model="addDimensionForm"
        label-width="120px"
        :rules="addDimensionFormRules"
      >
        <el-form-item label="维度名称" prop="dimensionName">
          <el-input
            type="text"
            v-model="addDimensionForm.dimensionName"
          ></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <div class="grid">
            <div
              class="icon-item"
              v-for="(item, index) of iconList"
              :key="index"
              @click="selectIcon(index, item)"
              ref="iconRef"
            >
              <img :src="item.content" />
              <span>{{ item.name }}</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="上传图标">
          <el-upload
            ref="uploadRef"
            :data="{ name: 'test' }"
            :headers="uploadHeaders"
            :action="uploadUrl"
            :limit="1"
            :on-exceed="handleExceed"
            :on-success="handleSuccess"
            :file-list="fileList"
            :on-remove="handleRemove"
            accept=".png,.jpeg,.jpg"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过100kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDimensionDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddDimension">确 定</el-button>
        <!-- <el-button type="primary" @click="addDimensionDialogVisible = false">确 定</el-button> -->
      </span>
    </el-dialog>
    <!-- 修改维度名称对话框 -->
    <el-dialog
      title="修改维度名称"
      :visible.sync="editDimensionDialogVisible"
      width="30%"
    >
      <el-form
        ref="editDimensionFormRef"
        :model="editDimensionForm"
        label-width="120px"
      >
        <el-form-item label="维度名称" prop="dimensionName">
          <el-input
            type="text"
            v-model="editDimensionForm.dimensionName"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDimensionDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmEditDimension"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 添加指标对话框 -->
    <el-dialog
      title="添加指标"
      :visible.sync="addIndicatorDialogVisible"
      width="30%"
      @closed="handleAddIndicatorDialogClosed"
    >
      <el-form
        ref="addIndicatorFormRef"
        :model="addIndicatorForm"
        label-width="120px"
      >
        <el-form-item label="指标名称" prop="indicatorName">
          <el-input
            type="text"
            v-model="addIndicatorForm.indicatorName"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addIndicatorDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddIndicator">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加视角"
      :visible.sync="addViewDialogVisible"
      width="30%"
    >
      <el-form
        ref="addIndicatorFormRef"
        :model="addViewForm"
        label-width="120px"
      >
        <el-form-item label="视角名称" prop="name">
          <el-input type="text" v-model="addViewForm.name"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input type="text" v-model="addViewForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addViewDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddView">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 确认保存/发布对话框 -->
    <el-dialog :visible.sync="confirmDialogVisible" width="30%" center>
      <div class="confirm-info">
        <i class="el-icon-warning-outline"></i>
        <span> 发布后不可修改，请确认是否发布？ </span>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="confirmDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmAddIndicatorSystem(1)"
            >确认发布</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 选择关联的指标对话框 -->
    <!-- <el-dialog title="选择关联的指标" :visible.sync="selectRefIndicatorDialogVisible" width="60%"
      style="margin-top: -110px; overflow-y: hidden">
      <indicator-table :tableData="indicatorTableData" :default-selection="indicatorForm.selection"
        :selectIndicatorArr="selectIndicatorArr" @selection-change="handleSelectionChange"></indicator-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="selectRefIndicatorDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmSelectIndicator">确认</el-button>
        </span>
      </template>
    </el-dialog> -->
  </div>
</template>

<script>
import {
  getAllAreaList,
  getIconList,
  insertQuota,
  insertDimension,
  insertIndicator,
  //queryQuotaList,
  // getDimensionByQuotaId,
  // getIndicatorByDimensionId,
  uploadUrl,
  judgeQuoInfo,
  //getQuotaByPkid,
  queryMulConditions,
} from '@api/indicator-manage'
import IconButton from '@c/icon-button'
import SvgIcon from '@c/svg-icon'
import { queryArea } from '@api/question'
import { queryIcon } from '@api/city-index'
// import IndicatorTable from "./components/indicatorTable.vue";
// import SelectionTable from "./components/selectionTable.vue";

export default {
  components: {
    IconButton,
    SvgIcon,
    // IndicatorTable,
    // SelectionTable,
  },
  data() {
    return {
      uploadUrl,
      uploadHeaders: {
        'AUTH-TOKEN': JSON.parse(window.localStorage.getItem('user')).token,
      },
      casxaderProps: {
        value: 'areaCode',
        label: 'areaName',
        checkStrictly: true,
        children: 'children',
      },
      areaInfo: [],
      fileList: [],
      iconList: [],
      activeStep: 0,
      taskForm: {
        name: '',
        medicalCity: '',
        medicalYear: '',
        indicatorDesciption: '',
        dimensionTree: [],
      },
      taskFormRules: {
        name: [
          { required: true, message: '请填写指标体系名称', trigger: 'blur' },
        ],
        medicalCity: [
          { required: true, message: '请选择体检城市', trigger: 'change' },
        ],
        medicalYear: [
          { required: true, message: '请选择体检年份', trigger: 'change' },
        ],
        // indicatorDesciption: [{ required: true, message: '请填写指标体系说明', trigger: 'blur' }],
      },
      taskFormRef: null,
      indicatorForm: {
        dutyDepartment: '',
        indicatorParaphrase: '',
        indicatorType: '',
        evaluationCriterion: '',
        evaluationType: '',
        referenceValue: '',
        indicatorUnit: '',
        relevanceIndicatorSystem: [],
        hasRelevance: '0',
        selection: [],
      },
      cityOptions: [],
      cityOptionsLoading: true,
      yearOptions: [...Array(new Date().getFullYear() + 1 - 2015)]
        .map((_, i) => {
          return {
            value: i + 2015,
            label: i + 2015 + '年',
          }
        })
        .reverse(),
      dutyDepartmentOptions: [],
      indicatorTypeOptions: [
        {
          value: 0,
          label: '基本指标',
        },
        {
          value: 1,
          label: '特色指标',
        },
        {
          value: 2,
          label: '补充指标',
        },
      ],
      evaluationTypeOptions: [
        {
          value: 0,
          label: '底线型',
        },
        {
          value: 1,
          label: '目标型',
        },
        {
          value: 2,
          label: '区间型',
        },
      ],
      indicatorSystemOptions: [],
      indicatorOptions: [],
      dimensionTree: [],
      editDimensionDialogVisible: false,
      editDimensionForm: {
        dimensionName: '',
        id: '',
      },
      addDimensionDialogVisible: false,
      addDimensionFormRef: null,
      addDimensionForm: {
        dimensionName: '',
        id: '',
        icon: '',
      },
      addDimensionFormRules: {
        dimensionName: [
          { required: true, message: '请填写维度名称', trigger: 'blur' },
        ],
        icon: [
          {
            required: true,
            message: '请选择图标',
            trigger: ['change', 'blur'],
          },
        ],
      },
      addIndicatorDialogVisible: false,
      addViewDialogVisible: false,
      addIndicatorFormRef: null,
      addIndicatorForm: {
        indicatorName: '',
        id: '',
      },
      addViewForm: {
        name: '',
        remark: '',
      },
      currentDimension: {},
      currentView: {},
      iconRef: null,
      // 确认对话框
      confirmDialogVisible: false,
      pageLoading: true,
      // 选择关联的指标对话框
      selectRefIndicatorDialogVisible: false,
      indicatorTableData: [],
      selection: [],
      infoLoading: false, // 指标详情加载
      selectIndicatorArr: [],
      page: {
        name: '',
        dimensionId: '',
        year: '',
        areaId: '',
        quotaName: '',
        pageSize: 10,
        pageIndex: 1,
        total: 0,
      },
      currentData: '',
      currentSelection: [],
      evaluationTable: [],
      dataTree: [
        {
          id: 1,
          label: '建成区面积',
        },
      ],
    }
  },
  computed: {
    indicatorSystemName() {
      return this.taskForm.medicalYear && this.taskForm.medicalCity
        ? this.taskForm.medicalYear +
            '年' +
            this.cityOptions.find(
              (item) => item.value === this.taskForm.medicalCity
            ).label
        : ''
    },
    indicatorLength() {
      let length = 0
      this.dimensionTree.forEach((item) => {
        length += item.children.length
      })
      return length
    },
    listenCityAndYear() {
      return this.taskForm.medicalCity && this.taskForm.medicalYear
        ? [this.taskForm.medicalCity, this.taskForm.medicalYear]
        : null
    },
  },
  methods: {
    handleChangeArea() {
      this.taskForm.medicalCity = this.areaInfo[this.areaInfo.length - 1]
    },
    removeChildrenAtLevel(tree, targetLevel) {
      // 遍历树中的每个节点
      for (let i = 0; i < tree.length; i++) {
        // 检查当前节点的level是否为目标level
        if (tree[i].level === targetLevel) {
          // 如果是的话，移除children属性
          delete tree[i].children
        }

        // 如果当前节点还有子节点，并且子节点的level也为目标level，则递归处理子节点
        if (tree[i].children && tree[i].children.length > 0) {
          this.removeChildrenAtLevel(tree[i].children, targetLevel)
        }
      }

      return tree
    },
    addDimension() {
      this.addDimensionDialogVisible = true
    },
    confirmAddDimension() {
      this.$refs.addDimensionFormRef.validate((valid) => {
        if (valid) {
          if (
            this.dimensionTree.findIndex(
              (item) => item.label === this.addDimensionForm.dimensionName
            ) === -1
          ) {
            const params = {
              name: this.addDimensionForm.dimensionName,
              iconId: this.addDimensionForm.iconId,
            }
            insertDimension(params).then((res) => {
              if (res.success) {
                const id = res.data
                this.dimensionTree.push({
                  id: id,
                  label: this.addDimensionForm.dimensionName,
                  icon: this.addDimensionForm.icon,
                  children: [],
                })
                this.addDimensionDialogVisible = false
              }
            })
          } else {
            this.$message.warning('不能添加重复的维度')
          }
        }
      })
    },
    addIndicator(data) {
      this.currentView = data
      this.addIndicatorDialogVisible = true
    },
    addViewData(data) {
      this.currentDimension = data
      this.addViewDialogVisible = true
    },
    confirmAddView() {
      const obj = {
        id:
          '' +
          this.currentDimension.id +
          (this.currentDimension.children.length + 1),
        label: this.addViewForm.name,
        children: [],
      }
      this.currentDimension.children.push(obj)
      // 渲染视图
      this.dimensionTree = [...this.dimensionTree]
      // 每新增一个节点默认加载该节点指标内容
      // const catalog = this.dimensionTree.find(
      //   (item) => item.id === this.currentDimension.id
      // ).children;
      // const dataIndex = catalog.filter((item) => item.id === obj.id);
      // this.indicatorForm = dataIndex[0];
      // setTimeout(() => {
      //   this.$refs.tree.setCurrentKey(obj.id);
      // }, 100);
      this.addViewDialogVisible = false
    },
    confirmAddIndicator() {
      const obj = {
        id: '' + this.currentView.id + (this.currentView.children.length + 1),
        label: this.addIndicatorForm.indicatorName,
        referenceValueOfRange: ['', ''],
        hasRelevance: '0',
        selection: [],
      }
      this.currentView.children.push(obj)
      // 渲染视图
      this.dimensionTree = [...this.dimensionTree]
      this.indicatorForm = obj
      setTimeout(() => {
        this.$refs.tree.setCurrentKey(obj.id)
      }, 100)
      // 每新增一个节点默认加载该节点指标内容
      // const catalog = this.dimensionTree.find(
      //   (item) => item.id === this.currentDimension.id
      // ).children;
      // const dataIndex = catalog.filter((item) => item.id === obj.id);
      // this.indicatorForm = dataIndex[0];
      // setTimeout(() => {
      //   this.$refs.tree.setCurrentKey(obj.id);
      // }, 100);
      this.addIndicatorDialogVisible = false
    },
    saveIndicator() {
      this.dimensionTree.forEach((item) => {
        item.children.forEach((indicator) => {
          const params = {
            dimensionId: item.id,
            dataGroup:
              Object.prototype.hasOwnProperty.call(indicator, 'selection') &&
              indicator.selection.length > 0
                ? indicator.selection.map((item) => item.pkid)
                : [],
            indexDataInfo: {
              name: indicator.label,
              introduction: indicator.indicatorParaphrase,
              indexType: indicator.indicatorType,
              standard: indicator.evaluationCriterion,
              standardType: indicator.evaluationType,
              // 参考值，区分区间型和其他类型
              referenceValue:
                indicator?.evaluationType === 2 &&
                indicator.referenceValueOfRange
                  ? indicator.referenceValueOfRange.join('-')
                  : indicator.referenceValue,
              indexUnit: indicator.indicatorUnit,
            },
            serviceInfos: [],
          }
          insertIndicator(params).then((res) => {
            if (res.success) {
              console.log()
            }
          })
        })
      })
    },
    editDimension(data) {
      console.log(data)
      this.editDimensionForm.dimensionName = data.label
      this.editDimensionForm.id = data.id
      this.editDimensionDialogVisible = true
    },
    confirmEditDimension() {
      this.dimensionTree.forEach((item) => {
        if (item.id === this.editDimensionForm.id) {
          item.label = this.editDimensionForm.dimensionName
        }
      })
      this.editDimensionDialogVisible = false
    },
    handleAddDimensionDialogClosed() {
      this.$refs.addDimensionFormRef.resetFields()
      // 去除icon选中状态
      this.$refs.iconRef.forEach((item) => {
        item.className = 'icon-item'
      })
      // 清空文件
      this.fileList = []
      // 重置iconList
      this.initIconList()
    },
    handleAddIndicatorDialogClosed() {
      this.$refs.addIndicatorFormRef.resetFields()
    },
    handleNodeClick(data) {
      // console.log('data=====', data);
      this.indicatorForm = data
      this.currentData = data
    },
    selectIcon(index, data) {
      this.$refs.iconRef.forEach((item) => {
        item.className = 'icon-item'
      })
      this.$refs.iconRef[index].className = 'icon-item bgc-gray'
      //原来存在的维度才有名称
      if (index < 8) {
        this.addDimensionForm.dimensionName = data.name ?? ''
      }
      this.addDimensionForm.icon = data.content
      this.addDimensionForm.iconId = data.pkid
      this.$forceUpdate()
      this.$refs.addDimensionFormRef.validate()
    },
    async confirmAddIndicatorSystem(publishState) {
      await this.saveIndicator()
      const params = {
        name: this.taskForm.name,
        areaId: this.taskForm.medicalCity,
        year: this.taskForm.medicalYear,
        describe: this.taskForm.indicatorDesciption,
        dsIds: this.dimensionTree.map((item) => item.id),
        status: publishState,
      }
      insertQuota(params).then((res) => {
        if (res.success) {
          this.$message.success(`${publishState === 1 ? '发布' : '保存'}成功！`)
          this.$router.push('main')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleChange(data) {
      console.log(data, '----------')
    },
    handleSuccess(res, file) {
      console.log(123123123313323)
      if (res.success) {
        this.addDimensionForm.iconId = res.data
        const icon = {
          content: URL.createObjectURL(file.raw),
          pkid: res.data,
          name: '',
        }
        this.iconList.push(icon)
      } else {
        this.$message.error(res.message + '，请重新上传。')
        this.fileList = []
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    handleRemove() {
      if (this.iconList.length > 8) {
        this.iconList.pop()
      }
    },
    initIconList() {
      getIconList(1).then((res) => {
        if (res.success) {
          this.iconList = res.data.map((item) => {
            return {
              ...item,
              icon: item.content
                ? URL.createObjectURL(
                    new Blob([item.content], {
                      type: 'text/xml',
                    })
                  )
                : null,
            }
          })
        }
      })
    },
    saveIndicatorSystem() {
      this.$refs.taskFormRef.validate((valid) => {
        if (valid) {
          this.confirmAddIndicatorSystem(0)
        }
      })
    },
    publish() {
      // 表单验证
      this.$refs.taskFormRef.validate((valid) => {
        if (valid) {
          // 指标数量为0时不允许发布
          const indicatorTotal = this.dimensionTree.reduce(
            (total, item) => total + item.children.length,
            0
          )
          if (indicatorTotal > 0) {
            this.confirmDialogVisible = true
          } else {
            this.$notify({
              title: '提示',
              message: '需添加指标后才能发布！',
              duration: 2000,
            })
          }
        }
      })
    },
    delNode(node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex((d) => d.id === data.id)
      children.splice(index, 1)

      //当前选中的指标节点为被删除节点
      if (data.id === this.indicatorForm.id) {
        const catalog = this.dimensionTree.find(
          (item) => item.id === this.currentDimension.id
        ).children
        const dataIndex = catalog.find((item) => item.id !== data.id)
        //当前删除的节点同目录下存在其他指标节点
        if (dataIndex) {
          this.indicatorForm = dataIndex
          setTimeout(() => {
            this.$refs.tree.setCurrentKey(dataIndex.id)
          }, 100)
        } else {
          this.whetherExistNode()
        }
      }

      //当前删除节点为维度节点
      if (!node.isLeaf) {
        this.whetherExistNode()
      }
    },
    //判断当前是否存在可选择的指标节点
    whetherExistNode() {
      const isExistChildren = this.dimensionTree.find(
        (item) => item.children.length
      )
      if (isExistChildren) {
        this.indicatorForm = isExistChildren.children[0]
        setTimeout(() => {
          this.$refs.tree.setCurrentKey(this.indicatorForm.id)
        }, 100)
      } else {
        this.indicatorForm = {
          dutyDepartment: '',
          indicatorParaphrase: '',
          indicatorType: '',
          evaluationCriterion: '',
          evaluationType: '',
          referenceValue: '',
          indicatorUnit: '',
          relevanceIndicatorSystem: [],
          hasRelevance: '0',
          selection: [],
        }
      }
    },
    handleSelectionChange(selection) {
      this.currentSelection = selection
      // this.indicatorForm.selection = selection;
    },
    selectIndicator() {
      this.selectIndicatorArr = this.indicatorForm.selection
      this.selectRefIndicatorDialogVisible = true
      this.page.name = ''
      this.page.dimensionId = ''
      this.page.year = ''
      this.page.areaId = ''
      this.page.quotaName = ''
      this.page.pageSize = 10
      this.page.pageIndex = 1
      this.getData()
      // this.page.total = 0;
    },
    getData() {
      queryMulConditions(this.page).then((res) => {
        if (res.success) {
          this.indicatorTableData = res.data.list
          this.page.total = res.data.count
        }
      })
    },
    confirmSelectIndicator() {
      this.selectRefIndicatorDialogVisible = false
      this.indicatorForm.selection = this.currentSelection
    },
    deleteEvaluation() {},
  },
  watch: {
    page() {
      this.getData()
    },
    listenCityAndYear: function (newVal) {
      // console.log(1231212311);
      if (newVal) {
        const { year, areaId } = {
          year: this.taskForm.medicalYear,
          areaId: this.taskForm.medicalCity,
        }
        judgeQuoInfo(year, areaId).then((res) => {
          if (res.success) {
            if (!res.data) {
              this.$message.error(
                '该年份地区下已存在数据，请重新选择 体检城市 和 体检年份'
              )
              this.taskForm.medicalCity = ''
              this.taskForm.medicalYear = ''
            }
          }
        })
      }
    },
    'indicatorForm.relevanceIndicatorSystem': function (val, oldVal) {
      // console.log(val, oldVal);
      if (val?.length > 1) {
        if (val.length > oldVal.length) {
          let elementAdded
          val.forEach((item) => {
            oldVal.forEach((_) => {
              if (item[2] !== _[2] && item[0] === _[0]) {
                elementAdded = item
              }
            })
          })
          const copyVal = JSON.parse(JSON.stringify(val))
          // const elementAdded = val[val.length - 1];
          val.some((item, index) => {
            if (elementAdded[0] === item[0] && elementAdded[2] !== item[2]) {
              copyVal.splice(index, 1)
              return true
            }
          })
          this.indicatorForm.relevanceIndicatorSystem = copyVal
        }
      }
    },
  },
  created() {},
  mounted() {
    this.pageLoading = false
    queryArea({}).then((res) => {
      if (res.success) {
        this.cityOptions = this.removeChildrenAtLevel(res.data, 1)
        this.cityOptionsLoading = false
      }
    })

    queryIcon().then((res) => {
      if (res.success) {
        this.iconList = res.data.map((item) => {
          console.log(item)
          return {
            ...item,
            icon: item.content
              ? URL.createObjectURL(
                  new Blob([item.content], {
                    type: 'text/xml',
                  })
                )
              : null,
          }
        })
      }
    })
  },
}
</script>

<style lang="scss" scoped>
.indicator-list {
  height: 80%;
  width: 100%;
}

.dimension-tree {
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    padding-right: 8px;

    .custom-tree-node-title {
      display: flex;
      align-items: center;

      img {
        width: 20px;
        fill: #c0c4cc;
        display: inline-block;
        margin-right: 5px;
      }
    }
  }
}

i {
  font-style: normal;
  color: red;
}

.icon + .icon {
  margin-left: 20px;
}

.grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 25%);

  .icon-item {
    padding: 20px;
    height: 50px;
    text-align: center;
    width: 100px;
    float: left;
    font-size: 30px;
    color: #24292e;
    cursor: pointer;

    img {
      width: 50px;
      height: 40px;
      padding: 0 5px;
      box-sizing: border-box;
    }
  }

  span {
    display: block;
    width: 100px;
    height: 20px;
    font-size: 16px;
    line-height: 20px;
  }
}

.bgc-gray {
  // background-color: gray;
  border-color: #c5e3f1;
  background-color: #ecf6fb;
}

.nav {
  height: 40px;
  // background: #ffffff;
  // box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 2px;

  .breadcrumb {
    height: 40px;
    padding: 15px 0px 10px 25px;
    // padding-left: 25px;
    // padding-top: 23px;
    box-sizing: border-box;

    &-title {
      position: relative;
      margin-left: 11px;
      height: 21px;
      font-size: 15px;

      &::before {
        content: '';
        width: 5px;
        height: 16px;
        background: #10a6dd;
        border-radius: 3px;
        margin-right: 4px;
        display: inline-block;
        position: absolute;
        top: 50%;
        left: -11px;
        transform: translateY(-50%);
      }
    }
  }

  .divider {
    height: 1px;
    background: #e7f0ff;
    border-radius: 1px 1px 0px 0px;
  }
}

.content {
  width: calc(100% - 40px);
  height: calc(100% - 85px);
  position: absolute;
  top: 65px;
  bottom: 0;

  .divider {
    height: 1px;
    background: #e7f0ff;
    border-radius: 1px 1px 0px 0px;
  }

  .content-main {
    height: calc(100% - 50px);
    background: #ffffff;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    padding: 25px;

    // overflow: scroll;
    .base-info-title {
      position: relative;
      margin-left: 11px;
      height: 21px;
      font-size: 15px;

      &::before {
        content: '';
        width: 7px;
        height: 7px;
        background: #10a6dd;
        border-radius: 50%;
        margin-right: 4px;
        display: inline-block;
        position: absolute;
        top: 50%;
        left: -11px;
        transform: translateY(-50%);
      }
    }

    .el-form {
      height: calc(100% - 21px);

      .base-info {
        margin-top: 1rem;

        .el-row {
          width: 100%;
        }

        .el-form-item {
          .el-select {
            width: 100%;
          }

          .el-input {
            width: 100%;
          }

          .el-textarea {
            width: 100%;
          }
        }
      }

      .indicator-tree-title {
        position: relative;
        margin-left: 11px;
        font-size: 15px;

        &::before {
          content: '';
          width: 7px;
          height: 7px;
          background: #10a6dd;
          border-radius: 50%;
          margin-right: 4px;
          display: inline-block;
          position: absolute;
          top: 50%;
          left: -11px;
          transform: translateY(-50%);
        }
      }

      .form-footer {
        // text-align: left;
        margin-left: 0;
        margin-right: 23px;
        margin-top: 10px;
      }

      .indicator-list {
        height: 50%;
        width: 100%;
        display: flex;

        &-left {
          flex: 2.5;

          &-top {
            // height: 15%;
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: 0.5rem;
            box-sizing: border-box;
            padding: 0 23px;
          }

          &-bottom {
            height: 100%;
            width: 100%;
            overflow: scroll;
            padding: 11px 5px;
            box-sizing: border-box;
          }

          &-divider {
            width: calc(100% - 1rem);
            height: 1px;
            background: #e7f0ff;
            border-radius: 1px 1px 0px 0px;
            margin: 0.5rem;
          }
        }

        &-right {
          flex: 7;
          box-sizing: border-box;
          padding: 11px 27px;
          overflow-x: hidden;
          overflow-y: scroll;

          &-title {
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            font-weight: bold;
            // border-left: 4px solid #0098ff;
            padding-left: 10px;
            margin-bottom: 10px;
          }

          .top-btn {
            color: #3da1d2;
            font-size: 14px;
            font-weight: 400;
            cursor: pointer;
          }

          // .bottom-list {
          //   &-line {
          //     color: #000;
          //   }
          // }

          .top-operation {
            height: 50px;
            display: flex;
            align-items: center;
            background-color: #ebeef5;

            span {
              cursor: pointer;
              margin: 10px;
            }
          }

          .bottom-operation {
            height: 200px;
            border: 1px solid #ebeef5;
          }

          .el-input {
            width: 100%;
          }

          .el-cascader {
            width: 100%;
          }

          .el-select {
            width: 100%;
          }
        }

        &-divider {
          width: 1px;
          height: 100%;
          background: #e7f0ff;
          border-radius: 0px 1px 1px 0px;
        }
      }

      .summarization {
        // text-align: center;
        position: relative;

        .all {
          text-align: center;
          margin-bottom: 81px;
        }

        .confirm-info {
          box-sizing: border-box;
          padding-top: 18px;
          padding-left: 51px;
        }

        ul {
          text-align: center;
          margin-top: 88px;
          padding: 0;

          li {
            text-align: left;
            position: relative;
            padding: 19px;
            margin: 0;
            list-style: none;
            display: inline-block;
            width: 20%;
            height: 88px;
            background-color: #f1f5fa;
            border-radius: 2px;

            .li-left {
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;

              .indicator-system {
                flex: 1;
                display: flex;
                align-items: center;
              }

              .system-name {
                flex: 1;
                margin-top: 16px;
              }
            }

            img {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 19px;
            }
          }

          li + li {
            margin-left: 38px;
          }
        }
      }
    }
  }
}

.flex-center {
  display: flex;
  justify-content: center;

  ::v-deep .el-form-item__content {
    margin: 0 !important;
  }
}

.el-divider--horizontal {
  margin: 10px 0;
}

.main {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  padding: 20px;
  background-color: #f4f8fe;
}

.el-button--primary1 {
  background-color: #02bcca;
  border-color: #02bcca;
  color: #fff;

  &:hover {
    background: #1fc4cf;
    border-color: #02bcca;
    color: #fff;
  }
}

.el-button--plain1 {
  color: #02bcca;
  border-color: #02bcca;

  &:hover {
    border-color: #02bcca;
  }
}

.el-button--plain {
  color: #10a6dd;
  border-color: #10a6dd;

  &:hover {
    border-color: #10a6dd;
  }
}

.operation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

.confirm-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  i {
    font-size: 50px;
  }

  span {
    font-size: 20px;
  }
}

.index-definition {
  width: 20rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

::v-deep {
  .el-tree-node__content {
    height: 40px;
  }

  .el-textarea__inner {
    font-family: PingFang SC;
  }
}

.el-icon-warning-outline {
  margin: 0px 0px 20px 0px;
}

.content-title {
  padding: 0px 0 2px 0;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #000000;

  > span {
    margin-left: 5px;
  }
}
</style>
